.cover-container {
  z-index: -1;
}

.my-page-container {
  height: fit-content;
  //background-color: rgba(245, 245, 245, 0.9);
  background: linear-gradient(180deg, rgba(250, 250, 250, 0.85), rgba(245, 245, 245, 0.9));
  backdrop-filter: blur(20rpx);

  .user-info-container {
    .user-info_row {
      height: 50%;

      .avatar {
        border-radius: 50%;
        background-color: #e2e2e2;
      }

      .username {
        width: fit-content;

        text {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .user-page-btn {
          width: fit-content;
        }
      }

      .divider {
        height: 50%;
        flex-shrink: 0;
        background-color: #e2e2e2;
      }

      &:last-child {
        margin-top: 26rpx;
      }
    }
  }

  .user-login-container {
    .login-btn {
      width: fit-content;
      height: fit-content;
      border-radius: 50rpx;
    }
  }

  .horizontal-btn-container {
    width: 100%;
    height: fit-content;
    border-radius: 30rpx;

    .fas {
      background: linear-gradient(36deg, #ff5d6d,#ffc371);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .badge {
      width: fit-content;
      min-width: 32rpx;
      height: 32rpx;
      padding: 0 8rpx;
      position: absolute;
      top: -16rpx;
      left: 46rpx;
      background-color: #f35b56;
      color: #fff;
      line-height: 32rpx;
      text-align: center;
      font-size: 22rpx;
      border-radius: 150rpx;
    }
  }

  .vertical-btn-container {
    height: fit-content;
    border-radius: 30rpx;

    .btn_row {
      .btn_title {
        .fas, .far {
          width: 50rpx;
          margin-right: 20rpx;
          font-size: 42rpx;
        }
      }
    }

    button {
      padding: 0;
      background-color: transparent;
      border-radius: 0;
      line-height: unset;

      &::after {
        border: none;
      }
    }
  }
}
